{% extends 'layouts/base.html' %}
{% block content %}
<style type="text/css">
    label.error {
        color: red;
        float: none;
    }
</style>
  <form action="{{ url('index/appointment/makeAppointment') }}" method="post">
      <div id="container" class="bj_color order_wrap">
          <div class="weui_cells nomargintop">
              <div class="weui_cell weui_cell_select weui_select_after row_cell">
                  <div class="weui_cell_hd">
                     客户类型
                  </div>
                  <div class="weui_cell_bd weui_cell_primary right_select_box">
                      <select class="weui_select right_select" name="client_type" id="client_type">
                          <option value="C">个人</option>
                          <option value="Q">企业</option>
                          <option value="Z">政府</option>
                          <option value="O">其它</option>
                      </select>
                  </div>
              </div>
              <div class="weui_cell weui_cell_select weui_select_after row_cell">
                  <div class="weui_cell_hd">
                     选择业务
                  </div>
                  <div class="weui_cell_bd weui_cell_primary right_select_box">
                      <select class="weui_select right_select" name="service_id" id="service_id">
                          {% for v in service %}
                          <option value={{v.ser_id}} service_type={{v.ser_name}}>{{v.ser_name}}</option>
                          {% endfor%}
                      </select>
                      <input type="hidden" name="service_type" id="service_type" />
                  </div>
              </div>
          </div>
          <div class="data" id='item'>
              <div class="tr tr2">
                 <div class="td td-1 tr-title">
                     <p>业务名称</p>
                     <p>业务内容</p>
                 </div>
                 <div class="td td-2">
                    <p id="service_title">空调维修业务</p>
                    <p id="service_content">解决压缩们不制冷，门关上，灯不亮，噪声很大
                      声，电冰箱不工作等问题。
                    此服务只是维修费用，材料费不提供客成本价代
                      买，业主也可自购，二次上门不额外收费！
                    注:本服务需提前1天预约服务。</p>
                </div>
              </div>
          </div>
          <div class="weui_cells weui_cells_form" id="name">
              <div class="weui_cell row_cell_two">
                  <div class="weui_cell_hd"><label class="weui_label text_label">如何称呼您</label></div>
                  <div class="weui_cell_bd weui_cell_primary">
                      <input class="weui_input" type="text" placeholder="请输入您的姓名" name="client_name" id="client_name"/>
                  </div>
              </div>
              <div class="weui_cell row_cell_two">
                  <div class="weui_cell_hd"><label class="weui_label text_label">手机号码</label></div>
                  <div class="weui_cell_bd weui_cell_primary">
                      <input class="weui_input" type="tel" placeholder="请输入您的手机号码" name="client_phone"/>
                  </div>
              </div>
              <div class="weui_cell row_cell_two">
                  <div class="weui_cell_hd"><label class="weui_label text_label">预约的日期</label></div>
                  <div class="weui_cell_bd weui_cell_primary">
                      <input class="weui_input" type="date" placeholder="mm/dd/yyyy,--:--" name="appointment_date"/>
                  </div>
              </div>
              <div class="weui_cell row_cell_two">
                  <div class="weui_cell_hd"><label class="weui_label text_label">详细地址</label></div>
                  <div class="weui_cell_bd weui_cell_primary">
                      <input class="weui_input" type="text" placeholder="请输入您的住址" name="appointment_address"/>
                  </div>
              </div>
              <div class="weui_cell">
                  <p>请写下详细情况</p>
                  <div class="weui_cell_bd weui_cell_primary">
                      <textarea class="weui_textarea" rows="3" placeholder="请描述物品，包裹数量" name="appointment_detail"></textarea>
                  </div>
              </div>
          </div>
          <div class="btn_box">
              <a id="submit" class="weui_btn submit_btn" href="javascript:">提交预约</a>
          </div>
      </div>
  </form>
{% endblock %}
{% block script %}
<script src="{{config['application']['site']['assetsUri']}}front/js/jquery.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}admin/js/jquery.validate.min.js"></script>
<script>
  $(function() {
      $("#submit").click(function () {
          $('#service_type').val($('#service_id').find('option:selected').attr('service_type'));
          $('form').submit();
      });

      jQuery.validator.addMethod("isMobile", function (value, element) {
          var length = value.length;
          var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
          return this.optional(element) || (length == 11 && mobile.test(value));
      }, "请正确填写您的手机号码");
      $("form").validate({
          rules: {
              client_type: {
                  required: true,
              },
              service_id: {
                  required: true,
              },
              client_name: {
                  required: true,
                  maxlength: 20
              },
              client_phone: {
                  required: true,
                  isMobile: true
              },
              appointment_date: {
                  required: true,
              }
          },
          messages: {
              client_type: {
                  required: '请选择客户类型！',
              },
              service_id: {
                  required: '请选择服务类型！',
              },
              client_name: {
                  required: '请填写联系人姓名！',
                  maxlength: '不能超过20个字符！'
              },
              client_phone: {
                  required: '请填写联系电话！',
                  isMobile: '请正确填写您的手机号码！'
              },
              appointment_date: {
                  required: '请选择预约时间！',
              }
          }
      });
      $('#service_id').change(function () {
          $.ajax({
              type: "post",
              url: "{{ url('index/appointment/getservice') }}",
              data: "service_id=" + $('#service_id').val(),
              dataType: "json",
              success: function (data) {
                  $('#service_title').text(data[0].ser_name);
                  $('#service_content').text(data[0].content);
              }
          });
      })
  })
</script>
{% endblock %}
